<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<c:set value="${requestScope.response.data.pageInfoUtil }" var="pageInfoUtil"/>
<jsp:useBean class="com.sys.orders.pojo.AOrders" id="pojo"/>
<c:set value="${requestScope.response.data.list }" var="list" />

<!DOCTYPE HTML>
<html>
	<head>
		<%@ include file="/common/include/title.jsp"%>
		<title>订单统计列表 - 美妆产品销售系统</title>
		<script src="${rootPath }/common/resource/Highcharts/code/highcharts.js"></script>
		<script src="${rootPath }/common/resource/Highcharts/code/modules/series-label.js"></script>
		<script src="${rootPath }/common/resource/Highcharts/code/modules/exporting.js"></script>
		<script src="${rootPath }/common/resource/Highcharts/code/modules/export-data.js"></script>
		<script src="${rootPath }/common/resource/Highcharts/code/modules/accessibility.js"></script>
	</head>
	<body>
		<nav class="breadcrumb">
			<i class="Hui-iconfont">&#xe67f;</i> 首页 
			<span class="c-gray en">&gt;</span> 统计管理 
			<span class="c-gray en">&gt;</span> 订单统计列表 
			<a class="btn btn-success radius r"
				style="line-height: 1.6em; margin-top: 3px"
				href="javascript:location.replace(location.href);" title="刷新">
				<i class="Hui-iconfont">&#xe68f;</i>
			</a>
		</nav>
		<div class="page-container">
			<form action="${rootPath}/back/stat/ordersList" method="post">
				<input type="hidden" name="statType" value="${requestScope.statType }">
				<div class="text-c">
					日期范围：
					<input type="text" name="st" value="${requestScope.st }" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
						id="logmin" readonly="readonly" class="input-text Wdate" style="width: 160px;">
					- 
					<input type="text" name="ed" value="${requestScope.ed }" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"
						id="logmax" readonly="readonly" class="input-text Wdate" style="width: 160px;">
					<button name="" id="" class="btn btn-success" type="submit">
						<i class="Hui-iconfont">&#xe665;</i> 搜索
					</button>
				</div>
			</form>
			<div class="cl pd-5 bg-1 bk-gray mt-20">
				<span class="l">
					<a href="javascript:;" onclick="return $('#report').toggle();"
						class="btn btn-danger radius">
						<i class="Hui-iconfont">&#xe6e2;</i>
						报表切换
					</a>
				</span> 
				<span class="r">
					共有数据：<strong>${pageInfoUtil.totalRecord }</strong> 条
				</span>
			</div>
			<div class="mt-20" id="report" style="display: none;">
				
			</div>
			<div class="mt-20">
				<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
					<table
						class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
						<thead>
							<tr class="text-c">
								<th width="25"><input type="checkbox" name="" value=""></th>
								<th width="120">创建时间</th>
								<th width="80">数量</th>
								<th width="80">总价格</th>
								<th width="80">最高价</th>
								<th width="80">最低价</th>
								<th width="80">平均价</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${list }" var="listTemp" varStatus="stat">
								<tr class="text-c">
									<td><input type="checkbox" value="" name=""></td>
									<td>${listTemp.currDate }</td>
									<td>${listTemp.totalCount }</td>
									<td>${listTemp.totalPrice }</td>
									<td>${listTemp.maxPrice }</td>
									<td>${listTemp.minPrice }</td>
									<td>${listTemp.avgPrice }</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					
					<form action="${rootPath}/back/stat/ordersList" method="post" id="pageForm">
						<input type="hidden" name="keyword" value="${requestScope.keyword }">
						<input type="hidden" name="status" value="${requestScope.status }">
						<input type="hidden" name="st" value="${requestScope.st }">
						<input type="hidden" name="ed" value="${requestScope.ed }">
						
						<input type="hidden" name="statType" value="${requestScope.statType }">
						
						<div class="dataTables_info" id="DataTables_Table_0_info"
							role="status" aria-live="polite">
							共${pageInfoUtil.totalRecord }条,共${pageInfoUtil.totalPage}页
						</div>
						<div class="dataTables_paginate paging_simple_numbers"
							id="DataTables_Table_0_paginate">
							<a class="paginate_button previous disabled"
								aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0"
								onclick="return pageFormSubmit('pageForm', 'currentPage', '1', 'pageSize','${pageInfoUtil.pageSize}')"
								id="DataTables_Table_0_previous">
								首页
							</a>
							<a class="paginate_button previous disabled"
								aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0"
								onclick="return pageFormSubmit('pageForm', 'currentPage', '${pageInfoUtil.prePage}', 'pageSize','${pageInfoUtil.pageSize}')"
								id="DataTables_Table_0_previous">
								上一页
							</a>
							<a class="paginate_button next disabled" 
								aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0"
								onclick="return pageFormSubmit('pageForm', 'currentPage', '${pageInfoUtil.nextPage}', 'pageSize','${pageInfoUtil.pageSize}')"
								id="DataTables_Table_0_next">
								下一页
							</a>
							<a class="paginate_button next disabled" 
								aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0"
								onclick="return pageFormSubmit('pageForm', 'currentPage', '${pageInfoUtil.totalPage}', 'pageSize','${pageInfoUtil.pageSize}')"
								id="DataTables_Table_0_next">
								尾页
							</a>
							第<input type="text" class="paginate_button" id="currentPage" name="currentPage" value="${pageInfoUtil.currentPage }" size="5" maxlength="5">页
							每页<input type="text" class="paginate_button" id="pageSize" name="pageSize" value="${pageInfoUtil.pageSize }" size="5" maxlength="5">条
							<input type="submit" value="GO" class="paginate_button">
						</div>
					</form>
				</div>
			</div>
		</div>
		<%@ include file="/common/include/footer.jsp"%>
		
		<script type="text/javascript">
			$('.table-sort').dataTable({
				//"aaSorting" : [ [ 1, "desc" ] ],//默认第几个排序
				"bStateSave" : false,//状态保存
				"paging" : false,
				"info":false,
			});
	
			/*订单-添加*/
			function article_add(title, url, w, h) {
				var index = layer.open({
					type : 2,
					title : title,
					content : url
				});
				layer.full(index);
			}
			/*订单-删除*/
			function article_del(obj, id) {
				layer.confirm('确认要删除吗？', function(index) {
					$.ajax({
						type : 'POST',
						url : '',
						dataType : 'json',
						success : function(data) {
							$(obj).parents("tr").remove();
							layer.msg('已删除!', {
								icon : 1,
								time : 1000
							});
						},
						error : function(data) {
							console.log(data.msg);
						},
					});
				});
			}
		</script>
		<script type="text/javascript">
			Highcharts.chart('report', {

			    title: {
			        text: '每日订单统计'
			    },

			    subtitle: {
			        text: 'beauty.com'
			    },

			    yAxis: {
			        title: {
			            text: '日统计'
			        }
			    },

			    xAxis: {
			    	categories: 
		        	[
						<c:forEach items="${list }" var="listTemp" varStatus="stat">
							"${listTemp.currDate}"
							${stat.last ? '' : ',' }
						</c:forEach>	
					]
			    },

			    legend: {
			        layout: 'vertical',
			        align: 'right',
			        verticalAlign: 'middle'
			    },

			    series: [{
			        name: '订单总数',
			        data: [
						<c:forEach items="${list }" var="listTemp" varStatus="stat">
						${listTemp.totalCount},
						</c:forEach>	
						]
			    }, {
			        name: '日总金额',
			        data: [
						<c:forEach items="${list }" var="listTemp" varStatus="stat">
						${listTemp.totalPrice},
						</c:forEach>	
						]
			    }, {
			        name: '单笔最高金额',
			        data: [
						<c:forEach items="${list }" var="listTemp" varStatus="stat">
						${listTemp.maxPrice},
						</c:forEach>	
						]
			    }, {
			        name: '单笔最低金额',
			        data: [
						<c:forEach items="${list }" var="listTemp" varStatus="stat">
						${listTemp.minPrice},
						</c:forEach>	
						]
			    }, {
			        name: '日平均金额',
			        data: [
						<c:forEach items="${list }" var="listTemp" varStatus="stat">
						${listTemp.avgPrice},
						</c:forEach>	
						]
			    }],
			    responsive: {
			        rules: [{
			            condition: {
			                maxWidth: 500
			            },
			            chartOptions: {
			                legend: {
			                    layout: 'horizontal',
			                    align: 'center',
			                    verticalAlign: 'bottom'
			                }
			            }
			        }]
			    }

			});
		</script>
	</body>
</html>